<template>
  <div>
      <div class="title">精选热门地区</div>
      <ul class="horizontal-scroll">
          <li class="item border-bottom"
                v-for="item of List"
                :key="item.id"
              >   <div class =item-img-wrapper>
                    <img class="item-img" :src="item.imgUrl" />
                  </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
       List:[{
          id:"0001",
          imgUrl:"https://pics.lvjs.com.cn/pics/super/2018/07/1531129130_82068.jpg",
      },{
          id:"0001",
          imgUrl:"https://pics.lvjs.com.cn/pics/super/2018/07/1532584300_35561.jpg",
      },{
          id:"0001",
          imgUrl:"https://pics.lvjs.com.cn/pics/super/2018/07/1532584772_72811.jpg",
      },{
          id:"0001",
          imgUrl:"https://pics.lvjs.com.cn/pics/super/2017/03/1488938918_28512.jpg",
      },{
          id:"0001",
          imgUrl:"https://pics.lvjs.com.cn/pics/super/2018/07/1532402003_30907.jpg",
      },]
    }
  }

}

</script>
<style lang='stylus' scoped>
 .title
    margin-top:.4rem
    margin-bottom :.2rem
    line-height: .4rem
    text-indent: .3rem
    font-size :.30rem
.horizontal-scroll {
    width:700rpx;
    padding:20rpx 0;
    height:150rpx;
    white-space:nowrap
    margin:3% auto
    display :block;
    font-size: 0;
    vertical-align: middle;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        opacity: 0;
    }
    .item {
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
        width:200rpx;
        height: 133rpx;
        margin-right:10px;
        border-redius:5px

    }
      .item-img{
        height:105px
        width:80px
      }
}
</style>